<!-- 展示 》 数字 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="formItem.label" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <div :class="divClass">
      <slot v-if="hasPrefix" name="prefix">
        <span :class="`${className}-prefix`">{{ prefix }}</span>
      </slot>

      <slot :text="trans(model)">
        <span>{{ trans(model) }}</span>
      </slot>

      <slot v-if="hasSuffix" name="suffix">
        <span :class="`${className}-suffix`">{{ suffix }}</span>
      </slot>
    </div>
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixShow from '../mixShow'

const name = 'ShowNum'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixShow],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 是否不等 (可覆盖)
     */
    isDiff() {
      const { obj, prop, model, empty, EMPTY } = this
      if (obj[prop] === 0) return model !== 0
      return obj[prop] !== (model || empty || EMPTY)
    },

    /**
     * 设置内部绑定值 (可覆盖)
     */
    setModel() {
      const { obj, prop, empty, EMPTY } = this
      this.model = obj[prop] === 0 ? 0 : (obj[prop] || empty || EMPTY)
    },

    /**
     * 转换方法
     */
    trans(value) {
      const { empty, CN } = this
      if (CN) return CORE.numCN(value) || empty
      return CORE.numStr(value) || empty
    },
  },
}
</script>
